import { ComponentStyle, DiyComponent } from '@/components/DiyEditor/util'

/** 精选内容属性 */
export interface FeaturedContentProperty {
  // 区块标题
  sectionTitle: string
  // 区块副标题
  sectionSubtitle: string
  // 布局类型
  layoutType: 'grid' | 'list'
  // 精选项目列表
  featuredItems: FeaturedItem[]
  // 更多链接
  moreUrl: string
  // 组件样式
  style: ComponentStyle
}

/** 精选项目 */
export interface FeaturedItem {
  // 项目ID
  id: number
  // 标题
  title: string
  // 副标题
  subtitle?: string
  // 图片链接
  imgUrl: string
  // 内容类型：广告或文本
  contentType: 'ad' | 'text'
  // 价格（广告类型使用）
  price?: string
  // 富文本内容（文本类型使用）
  richText?: string
  // 跳转链接
  url: string
}

// 定义组件
export const component = {
  id: 'FeaturedContent',
  name: '精选内容',
  icon: 'ep:star',
  property: {
    sectionTitle: '精选内容',
    sectionSubtitle: '',
    layoutType: 'grid',
    featuredItems: [
      {
        id: 1,
        title: '法拉利488',
        imgUrl: 'https://picsum.photos/400/300?random=8&text=法拉利488',
        contentType: 'ad' as const,
        price: '¥3900/天起',
        url: '/pages/goods/index?id=1'
      },
      {
        id: 2,
        title: '三亚狂嗨指南',
        subtitle: '全系高端体验',
        imgUrl: 'https://picsum.photos/400/300?random=9&text=三亚狂嗨指南',
        contentType: 'text' as const,
        richText: '<p>全系高端体验，享受极致服务</p>',
        url: '/pages/goods/index?id=2'
      }
    ],
    moreUrl: '/pages/goods/list',
    style: {
      bgType: 'color',
      bgColor: '#f5f6fa',
      marginTop: 20,
      marginBottom: 0,
      marginLeft: 20,
      marginRight: 20,
      paddingTop: 20,
      paddingBottom: 20,
      paddingLeft: 20,
      paddingRight: 20,
      borderRadius: 8
    } as ComponentStyle
  }
} as DiyComponent<FeaturedContentProperty>
